<template>
    <div class="outside-content">
        <div class="fill-in">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                     :label-position="'top'" class="form clearfix">
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请输入姓名" v-model="ruleForm.name" @blur="$method.inputBlur()"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="cardId">
                    <el-input placeholder="请输入身份证号" v-model="ruleForm.cardId"
                              @blur="$method.inputBlur()"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone" class="is-required">
                    <el-input placeholder="请输入联系电话" v-model="ruleForm.phone" type="number"
                              @blur="$method.inputBlur()"></el-input>
                </el-form-item>
                <el-form-item label="车牌号" prop="carNum">
                    <el-input v-model="ruleForm.carNum" placeholder="请输入车牌号" @focus="focus"
                              :readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="拜访科室" prop="department" class="department" v-if="role==1">
                    <div @click="showDept" class="pad">
                        <span v-if="!ruleForm.department" class="placeholder">请选择</span>
                        <span v-else>
                                {{ruleForm.department.name}}
                            <!--                                {{$refs.department && $refs.department.getNameValues()}}-->
                            </span>
                        <i class="el-icon-arrow-right"></i>
                    </div>
                    <!--                    <popup-picker title="" :data="departmentData" v-model="ruleForm.department" :columns="1"-->
                    <!--                                  ref="department"-->
                    <!--                                  :placeholder="'请选择'" :show.sync="showPopupPicker" v-show="false"></popup-picker>-->
                </el-form-item>
                <el-form-item label="拜访人" prop="visitPeople" v-if="role==1">
                    <el-input placeholder="请输入拜访人" v-model="ruleForm.visitPeople"
                              @blur="$method.inputBlur()"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-button-group class="submit clearfix">
            <div class="primary" @click="submitForm('ruleForm')">提交</div>
        </el-button-group>
        <car-num-pop v-if="showCarPop" :carNum="ruleForm.carNum" @saveCarNum="saveCarNum"></car-num-pop>
        <!--        <router-view @chooseDept="chooseDept" @init="init"></router-view>-->
        <department v-if="showPopupPicker"></department>
    </div>
</template>

<script>
    import {Group, PopupPicker} from 'vux'
    import Department from '../components/department'
    import carNumPop from '../components/carNum'

    export default {
        data() {
            let phoneRule = /^1[34578]\d{9}$/,
                carNumRule = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/,
                validatePhone = (rule, value, callback) => {
                    if (!value) {
                        callback(new Error('请填写手机号'))
                    } else if (!phoneRule.test(value)) {
                        callback(new Error('手机号格式错误'))
                    } else {
                        callback()
                    }
                },
                validateCarNum = (rule, value, callback) => {
                    if (!carNumRule.test(value)) {
                        callback(new Error('车牌格式错误'))
                    } else {
                        callback()
                    }
                }
            return {
                ruleForm: {
                    name: '',
                    cardType: '1',
                    cardId: '',
                    phone: '',
                    carNum: '', // 车牌号
                    visitPeople: '', // 拜访人
                    department: '' // 科室
                },
                rules: {
                    name: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {validator: validatePhone, trigger: 'blur'}
                    ],
                    cardId: [
                        {required: true, message: '请填写身份证号', trigger: 'blur'}
                    ],
                    carNum: [
                        {required: true, message: '请填写车牌号', trigger: 'blur'},
                        {validator: validateCarNum, trigger: 'blur'}
                    ],
                    visitPeople: [
                        {required: true, message: '请填写拜访人', trigger: 'blur'}
                    ],
                    department: [
                        {required: true, message: '请选择科室', trigger: 'change'}
                    ]
                },
                tk: '',
                role: null,
                showPopupPicker: false,
                departmentData: [],
                detail: null,
                showCarPop: false
            }
        },
        mounted() {
            this.init()
            this.getData()
            // this.getDepartmentData()
            window.$vm.$on('chooseDept', item => {
                if (item) this.ruleForm.department = item
                this.showPopupPicker = false
            })
        },
        methods: {
            getData() {
                this.$http.get('/cardRecord/getUserCarRegisterInfo').then(result => {
                    if (result.success && result.data) {
                        this.ruleForm = {...this.ruleForm, ...result.data}
                        this.detail = result.data
                        this.ruleForm.visitPeople = ''
                    }
                })
            },
            getDepartmentData() {
                this.$http.get('/index/hsDepartmentData').then(result => {
                    if (result.success) {
                        this.departmentData = result.data
                    }
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$vux.toast.text(obj[Object.keys(obj)[0]][0].message, 'middle')
                        return false
                    }
                })
            },
            submitForm(formName) {
                let _this = this
                this.validate('ruleForm', () => {
                    _this.$http.post('/cardRecord/carRecord', {
                        name: this.ruleForm.name.trim(),
                        action: this.role,
                        carNum: this.ruleForm.carNum.trim(),
                        phone: this.ruleForm.phone.trim(),
                        visitDeptId: this.role === 2 ? this.detail.visitDeptId : (this.ruleForm.department ? this.ruleForm.department.id : ''),
                        visitPeople: this.role === 2 ? this.detail.visitPeople : this.ruleForm.visitPeople.trim(),
                        cardId: this.ruleForm.cardId.trim(),
                        tk: this.tk
                    }).then(result => {
                        if (result.success) {
                            _this.$router.replace({
                                path: '/cartReg',
                                query: {
                                    name: _this.ruleForm.name,
                                    carNum: _this.ruleForm.carNum,
                                    visitPeople: _this.role === 1 ? _this.ruleForm.visitPeople : _this.detail.visitPeople,
                                    department: _this.role === 1 ? (_this.ruleForm.department && _this.ruleForm.department.name) : _this.detail.visitDeptStr,
                                    phone: _this.ruleForm.phone
                                }
                            })
                            _this.$refs.ruleForm.resetFields()
                        }
                    })
                })
            },
            showDept() {
                // this.$router.push({
                //     path: this.$route.path + '/department',
                //     query: {
                //         role: this.role,
                //         qrresult: this.tk,
                //         isChildren: true
                //     }
                // })
                this.showPopupPicker = true
            },
            chooseDept(item) {
                this.init()
                if (item) this.ruleForm.department = item
            },
            init() {
                if (this.$route.query.role && !this.role) this.role = Number(this.$route.query.role)
                if (this.$route.query.qrresult && !this.tk) this.tk = this.$route.query.qrresult
            },
            focus() {
                this.showCarPop = true
            },
            saveCarNum(carNum) {
                if (carNum || carNum === '') this.ruleForm.carNum = carNum
                this.showCarPop = false
            }
        },
        components: {
            Group,
            PopupPicker,
            Department,
            carNumPop
        },
        beforeRouteLeave(to, from, next) {
            if (this.showPopupPicker) {
                this.showPopupPicker = false
                next(false)
            } else if (this.showCarPop) {
                this.showCarPop = false
                next(false)
            } else {
                next()
            }
        }
    }
</script>

<style scoped lang="less">
    .outside-content {
        background-color: #f4f4f4;
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: .86rem;

        /deep/ .fill-in {
            .extend-list {
                padding: 0 .2rem;
                line-height: .68rem;
                overflow: hidden;
                border-bottom: 1px solid #eee;

                .name, .phone {
                    float: left;
                    width: 35%;
                }

                .remove {
                    float: right;

                    i {
                        font-size: .32rem;
                        color: #ff6464;
                    }
                }
            }

            .add-address {
                margin-top: -.1rem;
                background-color: #fff;
                text-align: center;
                margin-bottom: .15rem;
                line-height: .68rem;
            }

            .extend {
                background: #fff;

                .head {
                    line-height: .76rem;
                    padding: 0 .2rem;
                }

                .add-address {
                    margin-top: .15rem;
                }
            }

            .info {
                margin-bottom: .15rem;
                margin-top: 0;

                .label {
                    color: #333;
                }
            }
        }
    }

    .form {
        /deep/ .el-form-item {
            font-size: .28rem;
            /*border-bottom: 1px solid #ddd;*/
            background-color: #fff;
            margin-bottom: .15rem;
            padding: .1rem 0;

            &.department {
                /*padding: .15rem 0;*/

                /*.el-form-item__label {*/
                /*    float: left;*/
                /*}*/

                .el-form-item__content {
                    /*text-align: right;*/
                    line-height: .68rem;
                    padding: 0 .2rem;

                    .placeholder {
                        color: #999;
                    }

                    i {
                        float: right;
                        height: .68rem;
                        line-height: .68rem;
                    }
                }
            }

            .el-form-item__label {
                color: #333;
                padding: 0 0 0 .2rem;
                font-size: .28rem;
                line-height: .48rem;
            }

            .el-form-item__content {
                position: relative;
                font-size: .28rem;
                line-height: .5rem;
            }

            .el-radio-group {
                padding: 0 .2rem;
                width: 100%;

                .el-radio {
                    width: 100%;
                    font-size: .28rem;
                    line-height: .48rem;
                    white-space: normal;
                    margin-right: 0;
                    margin-bottom: .1rem;
                }
            }

            .selector {
                padding: .1rem .2rem;
                line-height: .48rem;

                .weui-select {
                    padding-left: 0;
                    height: .48rem;
                    line-height: .48rem;
                    font-size: .28rem;
                }
            }

            .weui-cells_checkbox {
                .weui-icon-checked {
                    &:before {
                        font-size: .34rem;
                    }
                }

                .weui-check:checked + .vux-checklist-icon-checked {
                    &:before {
                        color: #409EFF;
                    }
                }
            }

            .el-input {
                font-size: .28rem;

                input {
                    padding: 0 .2rem;
                    border: 0 none;
                    height: .68rem;
                    line-height: .68rem;
                    border-radius: 2px;
                    /*border-color: rgba(255, 184, 203);*/
                }
            }

            .el-button {
                font-size: .28rem;
            }

            .form-group {
                .weui-cells {
                    &:before, &:after {
                        border: 0 none;
                    }

                    margin-top: 0;
                    font-size: .28rem;

                    .weui-cell {
                        padding: .15rem .2rem;

                        &:before {
                            border: 0 none;
                        }
                    }

                    .vux-cell-value {
                        color: inherit;
                    }
                }
            }

            &.form-item-top {
                margin-top: -.2rem;
                border-top: 1px solid #eee;
            }

            &.is-error {
                input {
                    /*background-color: rgba(255, 184, 203, .3);*/
                    /*border: 1px solid rgba(255, 184, 203);*/
                }
            }
        }
    }

    .submit {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: .88rem;
        line-height: .88rem;
        z-index: 5;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            box-shadow: 0 0 5px 0px #b1b1b1;
            height: 1px;
            width: 100%;
            z-index: 0;
        }

        > div {
            /*float: left;*/
            /*width: 50%;*/
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .back {
            background-color: #fff;
        }

        .primary {
            color: #fff;
            background-color: #6D97FF;
        }
    }
</style>
